<template>
    <div class="sumtablebox">
        <table border="1px solid #9B9B9B" cellspacing="0" cellpadding="5" >
            <thead>
                <tr>
                    <td>
                        <el-date-picker 
                        v-model="nowTime"
                        placeholder="Pick a Date"
                        type="month"
                        @change="pickData(nowTime)" />
                    </td>
                    <td :colspan="thisMonthDays+1">电极良率汇总</td>
                </tr>
                <tr>
                    <td>工序</td>
                    <td>项目</td>
                    <td v-for="item in thisMonthDays">{{ item }}</td>
                </tr>
            </thead>
            <tbody>
                <TableSlot v-for="item in nowdata.data" :key="item.id">
                    <tr v-for="(keyitem,index) in datakey" :key="keyitem.chi">
                        <td v-if="index===0" rowspan="5">{{ item.name }}</td>
                        <td>{{ keyitem.chi }}</td>
                        <td v-for="num in item[keyitem.eng]">{{ keyitem.eng==='yieldrate'?num+'%':num }}</td>
                    </tr>
                </TableSlot>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import data from '../components/symTableComponent/mock'
import TableSlot from '../components/TableSlot.vue';

const rawdata = ref([])
const nowdata = ref({})
const allTime = ref([])
const nowTime = ref('')
const thisMonthDays = ref(0)
const datakey = ref([])

const getData = ()=>{
    data.datalist.forEach(ele=>{
        allTime.value.push({year:ele.year,month:ele.month,chi:ele.year+'-'+ele.month})
        rawdata.value.push({...ele,chi:ele.year+'-'+ele.month})
    })
    nowTime.value = new Date()
    pickData(nowTime.value)
    datakey.value = data.datakey
    thisMonthDays.value = howManyDays(rawdata.value[0].month,rawdata.value[0].year)
}

const howManyDays = (month,year)=>{
    let big = [1,3,5,7,8,10,12]
    if(big.includes(month)){
        return 31
    }else{
        if(month===2){
            if(year%4===0){
                return 29
            }else{
                return 28
            }
        }else{
            return 30
        }
    }
}

const pickData = (val)=>{
    let month = val.getMonth()+1
    let year = val.getFullYear()
    rawdata.value.forEach(ele=>{
        if(ele.year===year&&ele.month===month){
            nowdata.value = {...ele}
        }
    })
    thisMonthDays.value = howManyDays(month,year)
}

getData()
</script>

<style scoped>
.sumtablebox{
    width: 100%;
    height: 100%;
}
td{
    min-width: 50px;
    min-height: 25px;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
}
td:hover{
    background-color: rgb(187, 187, 187);
}
tr:hover{
    background-color: rgb(238, 238, 238);
}
thead{
    position: sticky;
    top:0;
    background-color: rgba(213, 213, 213, 0.7);
    backdrop-filter: blur(4px);
}
</style>
